<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .add {
        border: 1px solid #000;
        max-width: 700px;
        margin-bottom: 20px;
        padding: 20px;
        text-align: center;
    }

    table,
    td,
    th {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 700px;
        text-align: center  ;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model="code">
            品牌名称:
            <input type="text" v-model="goodsName">
            <br>
            产品图片地址:
            <input type="text" v-model="imgUrl">
            价格:
            <input type="text" v-model="price">
            <button @click="add">点击添加</button>
        </div>
        <div class="tb">
            <table>
                <tr>
                    <th>
                        全选:
                        <input type="checkbox" @change="allCheckChange" :checked="allCheck">
                    </th>
                    <th>
                        产品图片
                    </th>
                    <th>
                        编号
                    </th>
                    <th>
                        品牌名称
                    </th>
                    <th>
                        价格
                    </th>
                    <th>
                        数量
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr v-for="(item,i) in goods">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item" >
                    </td>
                    <td>
                        <img width="50" :src="item.imgUrl" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.goodsName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.inventory==1">-</button>
                        <b>{{item.inventory}}</b>
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(i)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" v-show="!goods.length">
                没有更多数据了
            </div>
            <div class="add" style = "width:658px;text-align:right">
                <h1>总价:{{total}}</h1>
            </div>
        </div>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //增加
    //1.给输入框使用v-model绑定数据

    //2.往goods数组中,多增加一个对象,视图就会多增加一个,使用数组的push

    //删除

    //1.点击按钮,获取当前这条数据的索引

    //2.使用数组的方法splice(索引,1) 就能删除

    let vm = new Vue({
        el: "#app",
        data: {
            code: "",
            imgUrl: "",
            goodsName: "",
            price: "",
            checks:[],
            allCheck:false,



            goods: [
                {
                    id: 1,
                    goodsName: "苹果",
                    imgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.d6d3aae7006611f68786a47e377c39ea?rik=7IrzMCwE5z2KgQ&riu=http%3a%2f%2fpic.ntimg.cn%2f20131028%2f13984383_171843651115_2.jpg&ehk=4SCA2042hzkkZofnLUSML2WgVzwz9RMXyKkXwc2zHG0%3d&risl=&pid=ImgRaw&r=0",
                    price: "20",
                    inventory: 30,
                    code: 1
                },
                {
                    id: 2,
                    goodsName: "香蕉",
                    imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Fe8e371378321b9e0906e9fede28a6ab13e7353d04da76-Sa8kMu_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674789221&t=bbee6e61a66c85f4e5727a20d254820d",
                    price: "120",
                    inventory: 310,
                    code: 2
                },
                {
                    id: 3,
                    goodsName: "橘子",
                    imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F34%2F79%2F6xJ0DMfT2a.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674789270&t=6ce951bea98b1597af5e6adcff9779dc",
                    price: "220",
                    inventory: 430,
                    code: 3
                },
            ],
        },
        
        methods: {
                add(){
                    if(!this.goodsName ||  !this.price || !this.code) {
                        return
                    }
                    
                    let obj = {
                        id: Math.random().toString(32).substring(2),
                        goodsName: this.goodsName,
                        imgUrl: this.imgUrl ? this.imgUrl : "https://img2.baidu.com/it/u=946277117,1507411036&fm=253&fmt=auto?w=640&h=245",
                        price: this.price,
                        inventory: 1,
                        code: this.code,
                    }

                    this.goods.push(obj)
                },

                del(i){
                    console.log(i)
                    this.goods.splice(i,1)
                },
                increase(item){
                    console.log(item)
                    item.inventory++

                },
                decrease(item){
                    item.inventory--
                },

                allCheckChange(e){
                    console.log(e.target.checked)
                    let checked = e.target.checked
                    if(checked){
                        this.checks = this.goods
                    }else {
                        this.checks = []
                    }
                }
            },

            watch:{
                checks(newVal){
                    console.log(newVal)
                    if(newVal.length === this.goods.length){
                        this.allCheck = true
                    }else {
                        this.allCheck = false
                    }
                }
            },

            computed:{
                total(){
                    return (this.checks.reduce(function(total, item){
                        return total += item.price * item.inventory
                    },0)).toFixed(2)
                }
            },
    })
</script>